<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Validate</title>
    <style>
        .redValid {
            color: red;
        }

    </style>
</head>

<body>
    <div data-ng-app="">
       <h2>验证实例</h2>
        <form novalidate name="myForm">
            <p>用户名：
                <br />
                <input type="text" name="user" data-ng-model="user" required />
                <span class="redValid" data-ng-show="myForm.user.$dirty && myForm.user.$invalid">
                    <span data-ng-show="myForm.user.$error.required">用户名是必须的</span>
                </span>
            </p>
            <p>邮箱：
                <br />
                <input type="email" name="email" data-ng-model="email" required />
                <span class="redValid" data-ng-show="myForm.email.$dirty && myForm.email.$invalid">
                    <span data-ng-show="myForm.email.$error.required">邮箱是必须的</span>
                    <span data-ng-show="myForm.email.$error.email">非法的邮箱地址</span>
                </span>
            </p>
            <input type="submit" data-ng-disabled="myForm.email.$dirty && myForm.email.$invalid ||
            myForm.user.$dirty && myForm.user.$invalid" />
        </form>
    </div>
    <script src="../node_modules/angular/angular.min.js"></script>
    <script src="form.js"></script>
</body>

</html>
